<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-31 16:42:26
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-09-06 16:33:03
 * @FilePath: \school-shop-vue\pages\shop\supplier.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-08-31 16:42:26
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-09-01 11:31:37
 * @FilePath: \school-shop-vue\pages\shop\supplier.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="contents">
    <my-navbar
      :background="'#fff'"
      leftText="供应商入驻申请"
      leftIcon="false"
      rightIcon="false"
    ></my-navbar>

    <div class="contents-box column_start">
      <div
        class="contents-box-item"
        :style="cssVar"
        v-for="(item, index) in infoList"
        :key="`${item.name}${index}`"
        :class="
          item.type == 'img' ? 'column_start' : 'row_between align_center'
        "
      >
        <div class="contents-box-item-left">{{ item.name }}</div>
        <div
          class="contents-box-item-right"
          :style="item.type == 'img' ? 'width: 100% !important' : ''"
        >
          <template>
            <input
              :type="item.type"
              placeholder-style="font-size: 20rpx"
              :placeholder="item.placeholder"
              v-model="form[item.value]"
              class="input"
            />
          </template>
        </div>
      </div>

      <move-verify @result="verifyResult" ref="verifyElement"></move-verify>

      <div
        class="contents-box-item"
        :style="cssVar"
        v-for="(item, index) in infoList2"
        :key="`${item.name}${index}`"
        :class="[
          item.type == 'img' ? 'column_start' : 'row_between align_center',
          index == 0 ? 'margin_sm' : '',
        ]"
      >
        <div class="contents-box-item-left">{{ item.name }}</div>
        <div
          class="contents-box-item-right"
          :style="item.type == 'img' ? 'width: 100% !important' : ''"
        >
          <template v-if="!item.verify && item.type != 'img'">
            <input
              :type="item.type"
              placeholder-style="font-size: 20rpx"
              :placeholder="item.placeholder"
              v-model="form[item.value]"
              class="input"
            />
          </template>
          <template v-if="item.verify && item.type != 'img'">
            <div class="phoneStyle">
              <input
                :type="item.type"
                placeholder-style="font-size: 20rpx"
                class="input"
                oninput="value=value.replace(/[^\d]/g,'')"
                :placeholder="item.placeholder"
                v-model="form[item.value]"
              />
              <span class="code" @click="getCode">{{ codeState }}</span>
            </div>
          </template>
          <template v-if="!item.verify && item.type == 'img'">
            <div class="imgStyle">
              <u-upload
                ref="upload"
                :action="action"
                max-size="2097152"
                :max-count="item.length"
                :auto-upload="true"
                :header="header"
                :form-data="{ type: 1 }"
                name="img"
                @on-success="uploadimg(item, $event)"
                @on-remove="removeimg(item, $event)"
                :show-progress="false"
              ></u-upload>
            </div>
          </template>
        </div>
      </div>

      <div class="btn" @click="submit">提交资料</div>
    </div>
  </div>
</template>

<script>
import { $https } from "@/static/js/request.js";
import moveVerify from "@/components/helang-moveVerify/helang-moveVerify.vue";
export default {
  components: {
    moveVerify,
  },
  data() {
    return {
      header: "",
      infoList: [
        {
          name: "公司名称",
          value: "company_name",
          type: "text",
          placeholder: "请输入公司名称",
          verify: false,
        },
        {
          name: "负责人名称",
          value: "contact_name",
          type: "text",
          placeholder: "请输入负责人名称",
          verify: false,
        },
      ],
      infoList2: [
        {
          name: "手机号",
          value: "phone_number",
          type: "number",
          placeholder: "请输入负责人手机号",
          verify: true,
          length: 11,
        },
        {
          name: "验证码",
          value: "code",
          type: "number",
          placeholder: "请输入验证码",
          verify: false,
          length: 6,
        },
        {
          name: "营业执照",
          value: "business_license",
          type: "img",
          length: 3,
          verify: false,
        },
        {
          name: "介绍信",
          value: "introduction_letters",
          type: "img",
          length: 3,
          verify: false,
        },
      ],
      form: {
        company_name: null,
        contact_name: null,
        phone_number: null,
        business_license: [],
        introduction_letters: [],
        code: null,
      },
      action: "",
      imgList: [],
      codeState: "获取验证码",
      code: null,
      seconds: 60,
      // 当为true时代表无法点击获取验证码
      getCodeState: false,
    };
  },
  onLoad() {
    this.header = {
      Authorization: uni.getStorageSync("copartner_token"),
    };
    //上传地址
    this.action = `${getApp().globalData.rootUrl}/partner/uploadFeedImg`;
  },
  computed: {
    cssVar() {
      return {};
    },
  },
  methods: {
    getCode() {
      let volidPhone = this.volidPhone();
      if (this.code && volidPhone) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        $https(
          "GETN",
          "sendMsgCode",
          { code: this.code, mobile: this.form.phone_number },
          (res) => {
            uni.hideLoading();
            if (res.data.errcode == 0) {
              this.setTime();
            } else {
              this.$u.toast(res.data.errmsg);
              return;
            }
          },
          true
        );
      } else {
        if (!this.code) {
          this.$refs.verifyElement.reset();
          this.$u.toast("请拖动滑块验证");
        }
      }
    },
    // 开始计时
    setTime() {
      let _this = this;
      if (_this.getCodeState) return;
      _this.getCodeState = true;
      _this.codeState = _this.seconds + "秒";
      var timer = setInterval(function () {
        _this.seconds = _this.seconds - 1;
        _this.codeState = _this.seconds + "秒";
        if (_this.seconds <= 0) {
          clearInterval(timer);
          _this.codeState = "获取验证码";
          _this.getCodeState = false;
        }
      }, 1000);
    },
    //验证手机号
    volidPhone() {
      if (!this.form.phone_number) {
        this.$u.toast("请输入手机号");
        return false;
      } else if (
        !/^((0\d{2,3}-\d{7,8})|(1[23567894]\d{9}))$/.test(
          this.form.phone_number
        )
      ) {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    uploadimg(item, opa) {
      // console.log("item, opa", item, opa);
      this.form[item.value].push(opa.data.src);
      // console.log("this.form", this.form);
    },
    removeimg(item, index) {
      this.form[item.value].splice(index, 1);
    },
    verifyResult(data) {
      if (data.flag) {
        $https(
          "GET",
          "getCode",
          {},
          (res) => {
            if (res.data.errcode == 0) {
              this.code = res.data.data.code;
            } else {
              this.$u.toast("验证失败，请重试");
            }
          },
          true
        );
      } else {
        //验证失败
        return;
      }
    },
    submit() {
      let _this = this;
      // 判断是否打开校验、手机校验
      let volidPhone = this.volidPhone();
      // 判断表单是否全部填写
      let checkForm = this.checkForm();
      let len = this.form.code.length;
      if (len > 6) {
        uni.showToast({
          title: "请输入正确的验证码",
          icon: "none",
        });
        return;
      }
      if (this.code && volidPhone && checkForm) {
        // 将营业执照由数组转为json字符串
        if (Array.isArray(_this.form.business_license)) {
          // _this.form.business_license = _this.form.business_license[0];
          _this.form.business_license = _this.form.business_license;
        }

        // console.log("00", _this.form.business_license, _this.form);

        let form = _this.$_.cloneDeep(_this.form);
        uni.showModal({
          title: "提示",
          content: "所填信息是否无误！",
          success: function (res) {
            if (res.confirm) {
              $https(
                "POST",
                "doCompanyAudit",
                form,
                (res) => {
                  if (res.data.errcode == 0) {
                    uni.showModal({
                      title: "提示",
                      content: "申请成功，等待管理员审核！",
                      success: function (res) {
                        if (res.confirm) {
                          _this.resetForm();
                        } else if (res.cancel) {
                          _this.resetForm();
                        }
                      },
                    });
                  } else {
                    uni.showToast({
                      title: `${res.data.errmsg}`,
                      icon: "none",
                    });
                  }
                },
                true
              );
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      }
    },
    checkForm() {
      for (let i in this.form) {
        if (Array.isArray(this.form[i]) && this.form[i].length < 1) {
          return false;
        } else if (!this.form[i]) {
          return false;
        } else {
          continue;
        }
      }
      return true;
    },
    // 重置页面
    resetForm() {
      uni.reLaunch({
        url: "/pages/shop/supplier",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.status_bar {
  width: 100%;
  height: var(--status-bar-height);
}
.contents {
  width: 100%;
  height: calc(100vh - var(--status-bar-height));
  background: #f6f6f7;

  &-box {
    border-top: 1rpx solid #e1e1e1;
    width: 100%;
    &-item {
      width: calc(100% - 80rpx);
      padding: 20rpx 40rpx;
      background: #fff;
      margin-bottom: 20rpx;

      &-left {
        width: 130rpx;
        font-size: 26rpx;
        font-weight: 600;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
      }
      &-right {
        width: calc(100% - 180rpx);
      }
    }
  }
}
.margin_sm {
  margin-top: 20rpx;
}

.phoneStyle {
  position: relative;
  .input {
    width: 170px;
  }
  .code {
    position: absolute;
    right: 0;
    top: 6rpx;
    font-size: 20rpx;
    color: #3ab08a;
  }
}

.align_center {
  align-items: center;
}

.imgStyle {
  margin-top: 20rpx;
}
/deep/.input {
  border: none;
  width: 100%;
}
/deep/.input:focus {
  outline: none;
}

.btn {
  width: 80%;
  margin: 0 auto 30rpx;
  border-radius: 45rpx;
  height: 66rpx;
  line-height: 66rpx;
  text-align: center;
  background: #0eaa78;
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
}
</style>